<template>
    <div class="blog-list">
        <mu-container>
            <h2>博客详情</h2>

            <div class="padding-height-30">
                <h3>标题：</h3>
                <p>{{blogData.title}}</p>
            </div>
            <div class="padding-height-30">
                <h3>内容：</h3>
                <p>{{blogData.content}}</p>
            </div>
            <div class="padding-height-30">
                <h3>语言：</h3>
                <p>{{blogData.lang}}</p>
            </div>
            <div class="padding-height-30">
                <h3>时间：</h3>
                <p>{{blogData.date}}</p>
            </div>
            <div class="padding-height-30">
                <h3>技术类型：</h3>
                <p>{{blogData.type}}</p>
            </div>
            <div class="padding-height-30">
                <h3>分享人：</h3>
                <p>{{sharePerson}}</p>
            </div>
            <div class="padding-height-30">
                <h3>开关状态：</h3>
                <p>{{blogData.switch?'开':'关'}}</p>
            </div>
            <div class="padding-height-30">
                <h3>slider：</h3>
                <p>{{blogData.slider}}</p>
            </div>

        </mu-container>
    </div>
</template>

<script>
import axios from "axios";
export default {
  name: "BlogList",
  data() {
    return {
      blogData: {},
      sharePerson: ""
    };
  },
  created() {
    let id = this.$route.params.id;

    axios
      .get("https://wd4276888673xfbavi.wilddogio.com/blog/" + id + ".json")
      .then(response => {
        console.log(response);
        this.blogData = response.data;
        this.checkPerson();
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    checkPerson() {
      let person = "",
        data = this.blogData.person;
      for (var i in data) {
        person += data[i] + "、";
      }
      this.sharePerson = person;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style: none;
}
li {
  background: #ddd;
  padding: 30px;
  border: 3px solid #fff;
}
h3 {
  padding-bottom: 20px;
}
</style>
